window.addEventListener("DOMContentLoaded", function() {
	let cities = [];
	let weatherDiv = new Vue({
		el: "#header-area",
		data: {
			count01: 0,
			weather: [],
			cities,
			inputParam: "请输入要查阅天气的城市：",
			showEchartsDivBtn: false,
			showEchartsDiv: false, // 是否展示点击“展开数据图表”查看echarts图表的div的变量
			inputValue: "北京市", // 刚开始输入框中为空内容
			backgroundColor01: "#ffffcc",
			backgroundColor02: "",
			textColor01: "#73d6b2",
			time1: 0,
			time2: 0, // 用来限制一定时间内点击次数不宜过多
			showDiv: false,
			tempeUnitTypeArr: ["℃", "℉"],
			temperatureUnitType: "℃", // 一开始展示的是摄氏度℃
			tempeOrder: 0,
			nowTemperature: 0,
			option01: {}, // 数据可视化渲染的option数据对象
			weatherDates: [],
			weatherWeekDays: [],
			weatherMaxT: [],
			weatherMinT: [],
			weatherConditionType: [],
			weatherFengXiang: [],
			weatherFengLi: [],
			echarts01: {}
			
			/*date01: "", // Date 日期
			temperature: 0, // 气温
			sunny: "晴天", // 晴天还是阴天还是雨天
			wind: "东南风微风", // 风向风速
			scale: "良" // 空气质量*/
		},
		computed: {
			determineShowHideEcharts() {
				return (this.showEchartsDiv = !this.showEchartsDiv);
			}
		},
		methods: {
			getWeather() {
				let _this = this;
				if(_this.inputValue.trim() !== "") {
					this.time1 = +new Date();
					// 要进行防止点击过快，短时间内有多次请求的重复问题，这样不太好
					if(this.time1 - this.time2 > 1000) {
						this.showDiv = false;
						this.showEchartsDivBtn = true;
						this.showEchartsDiv = false;
						// 获取天气信息的方法
						axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + _this.inputValue)
						.then(function(success) {
							_this.weather = [];
							console.log(success.data.data);
							_this.weather = _this.weather.concat(success.data.data.forecast);
							_this.clearToBlankArray(_this);
							let index = 0;
							_this.renderEcharts();
							_this.option01.xAxis.data = [];
							for (let i of _this.weather) {
								//1、 天气日期，如3月1日
								_this.weatherDates.push((new Date().getMonth() + 1) + "月 " + i.date.substring(0, i.date.indexOf("星期")));
								//2、星期几
								_this.weatherWeekDays.push(i.date.substr(i.date.indexOf("星期"), 3));
								// 把日期数据填入天气echarts图表的X轴数据中
								_this.option01.xAxis.data.push(_this.weatherDates[index] + _this.weatherWeekDays[index]);
								
								//3、每天最低温
								_this.weatherMinT.push(i.low);
								//4、每天最高温
								_this.weatherMaxT.push(i.high);
								//5、天气情况：多云？晴天？阴天？
								_this.weatherConditionType.push(i.type);
								// 6、每天风力、等级
								_this.weatherFengXiang.push(i.fengxiang);
								// 7、每天风向
								_this.weatherFengLi.push(i.fengli.toString().replace(/\D/gi, "") + "级");
								
								// 每天最低温填入echarts中
								_this.option01.series[0].data
								.push(parseFloat(i.low
								.substring(i.low.indexOf("温") + 1, i.low.indexOf("℃"))));
								
								// 每天最高温填入echarts中
								_this.option01.series[1].data
								.push(parseFloat(i.high
								.substring(i.high.indexOf("温") + 1, i.high.indexOf("℃"))));
								// 每天风力大小填入echarts中
								_this.option01.series[2].data
								.push(parseFloat(i.fengli
								.replaceAll(/\D/gi, "")));
								index++;
							}
							
							_this.nowTemperature = success.data.data.wendu;
							//this.tempeOrder = 0;
							_this.temperatureUnitType = "℃";
							//this.showEchartsDiv = true;
							document.getElementById('con1').removeAttribute('_echarts_instance_');
							_this.echarts01 = echarts.init(document.getElementById("con1"), "dark");
							//_this.renderEcharts();
							_this.option01.title.text = _this.inputValue + "5天内的天气情况";
							_this.echarts01.setOption(_this.option01);
							window.addEventListener("resize", function() {
								_this.echarts01.resize();
							});
						}, function(fail) {
							console.log("sorry");
							alert("欧no，失败。" + fail);
	
						});
						console.log(666);
					}
					else {
						this.showDiv = true; // 提示信息的盒子显示出来，提示用户慢一点点击
					}
					this.time2 = this.time1;	
					return;
				}
				this.showEchartsDivBtn = false;
				this.showEchartsDiv = false;
				_this.inputParam = "请输入要查阅天气的城市：";

				/*
					请求地址：
						http://wthrcdn.etouch.cn/weather_mini;
					请求方式：get;
					请求参数：city；
					相应内容（获取内容）：天气信息。
				*/
			},

			changeColor() {
				this.backgroundColor02 = this.backgroundColor01;

			},
			toggleTempeUnitType() {
				if(this.temperatureUnitType === "℉") {
					// 华氏度℉ 转摄氏度℃：C = (F-32)/1.8，tempeOrder为 1 了
					//this.tempeOrder--;
					this.nowTemperature = ((parseFloat(this.nowTemperature) - 32) / 1.8).toFixed(2);
					this.temperatureUnitType = "℃";
					//this.temperatureUnitType = this.tempeUnitTypeArr[this.tempeOrder];
					console.log(this.temperatureUnitType, this.nowTemperature);
					return;
				}
				//this.tempeOrder++; // 摄氏度℃ 转华氏度℉：F=C×1.8+32，tempeOrder为 0 了
				this.nowTemperature = (parseFloat(this.nowTemperature) * 1.8 + 32).toFixed(2);
				this.temperatureUnitType = "℉";
				//this.temperatureUnitType = this.tempeUnitTypeArr[this.tempeOrder];
				console.log(this.temperatureUnitType, this.nowTemperature);
			},
			clearToBlankArray(_this) {
				//let  = this;
				_this.weatherDates = [],
				_this.weatherWeekDays = [],
				_this.weatherMaxT = [],
				_this.weatherMinT = [],
				_this.weatherConditionType = [],
				_this.weatherFengXiang = [],
				_this.weatherFengLi = [];
			},
			renderEcharts() {
				try {
					
					this.option01 = {
						title: {
							text: "",
							textStyle: {
								color: "orange",
								fontSize: 15
							},
							top: 0,
							left: 0
							
						},
						legend: {
							bottom: 0,
							left: "center",
							padding: 5
							//orient: "vertical"
						},
						tooltip: {
							trigger: "axis",
							backgroundColor: "white",
							
							textStyle: {
								color: ["#4980fd", "red", "orange"],
							}
						},
						toolbox: {
							backgroundColor: "orange",
							color: "white",
							feature: {
								saveAsImage: {},
								dataZoom: {},
								dataView: {
									
								}
							},
							orient: "vertical"
						},
						xAxis: {
							type: "category",
							name: "",
							data: [],
							splitLine: {
								show: true
							}
						},
						yAxis: {
							type: "value",
							name: "各个参数值"
						},
						series: [
							// 存放每日  最低  气温的折线图数据对象
							{
								name: "每天最低温",
								type: "line",
								color: "#4980fd",
								data: []
							},
							// 存放每日  最高   气温的折线图数据对象
							{
								name: "每天最高温",
								type: "line",
								color: "red",
								data: []
							},
							// 存放每日 风力 等级的折线图数据对象
							{
								name: "每天风力大小",
								type: "line",
								color: "orange",
								data: []
							}
							
						]
						
					}
					
					
					return;
				} catch(err) {
					alert(err.message);
				}
				
				
			}

		},
		components: {
			"nav-bar": {
				template: `
										<div>
											<mark>globale mark tag</mark>
										</div>
									`
			}
		}

	});
	
	
});